/* 
1 打开页面的时候 看到学员信息数据
  1 定义一个函数  发送请求获取数据 渲染页面 

2 新增学员
  1 点击  “新增” 按钮 弹出模态框 - 显示新增 表单   已经实现 
  2 新增表单中  籍贯 下拉列表  
    1 重新去熟悉  select 标签
    2 考虑结合业务 实现 
 */

const tbody = document.querySelector('tbody');

function getStudentList() {

    axios.get('/student/list')
        .then(result => {
            if (result.data.code === 0) {
                const list = result.data.data
                console.log(list);
                const html = list.reduce((h, v) => h + `<tr>
                <th scope="row">${v.id}</th>
                <td>${v.name}</td>
                <td>${v.age}</td>
                <td>${v.sex}</td>
                <td>${v.group}</td>
                <td>${v.phone}</td>
                <td>${v.salary}</td>
                <td>${v.truesalary}</td>
                <td>${v.province + v.city + v.county}</td>
                <td>
                  <button  type="button" data-id=${v.id} class="btn btn-primary  update-show-modal btn-sm">修改</button>
                  <button type="button" data-id=${v.id} class="btn btn-danger delete-btn btn-sm">删除</button>
                </td>
              </tr>`, '')

                tbody.innerHTML = html
            }
        })


}

getStudentList();

// 2 新增学员
//   1 点击  “新增” 按钮 弹出模态框 - 显示新增 表单   已经实现
//   2 新增表单中  籍贯 下拉列表
//     1 重新去熟悉  select 标签
//     2 考虑结合业务 实现 


// 发送请求获取城市数据 来渲染下拉列表   会导致 错题提示 出现  处理
// 原因可能是  普通数据 返回的格式   和  城市列表返回数据格式 不一样
// 让后端去调整  返回的数据结构 必须一致！！！！


const addForm = document.querySelector('#addModal form');
const updateForm = document.querySelector('#updateModal form');

//下拉菜单初始化 的封装函数
function initSelect(selector) {
    const provinceSelect = document.querySelector(`${selector} [name=province] `); //获取 省的下拉列表
    const citySelect = document.querySelector(`${selector} [name = city]`); //获取 市的下拉列表
    const countySelect = document.querySelector(`${selector} [name=county] `); //获取 省的下拉列表

    renderSelect('/geo/province', {}, provinceSelect, '省')

    //给 省的下拉列表 新增 change事件
    provinceSelect.addEventListener('change', function () {

        // axios.get('/geo/city', {
        //     params: {
        //         pname: provinceSelect.value
        //     }
        // })
        //     .then(result => {
        //         //console.log(result);

        //         citySelect.innerHTML = result.data.reduce((h, v) => h + `<option  value="${v}">${v}</option>`, `<option selected value="">--市--</option>`)

        //     })

        renderSelect('/geo/city', { pname: provinceSelect.value }, citySelect, '市')


    })

    //给 市的下拉列表 新增 change事件
    citySelect.addEventListener('change', function () {

        // axios.get('/geo/county', {
        //     params: {
        //         pname: provinceSelect.value,
        //         cname: citySelect.value
        //     }
        // })
        //     .then(result => {
        //         //console.log(result);

        //         countySelect.innerHTML = result.data.reduce((h, v) => h + `<option  value="${v}">${v}</option>`, `<option selected value="">--县--</option>`)

        //     })

        renderSelect('/geo/county', { pname: provinceSelect.value, cname: citySelect.value }, countySelect, '县')

    })

}


//get请求的的封装函数
function renderSelect(url, params, dom, label, value = '') {
    axios.get(url, { params })
        .then(result => {

            dom.innerHTML = result.data.reduce((h, v) => h + `<option  value="${v}">${v}</option>`, `<option  value="">--${label}--</option>`)

            //下拉单设置默认值
            dom.value = value
        })
}
//初始化 新增表单的 下拉菜单
initSelect('#addModal')
//初始化 编辑表单的 下拉菜单
initSelect('#updateModal')

//添加学员   form表单 提交事件
addForm.addEventListener('submit', function (e) {
    e.preventDefault()
    //获取 表单信息

    const data = $(addForm).serialize()

    axios.post('/student/add', data)
        .then(result => {
            if (result.data.code === 0) {
                //弹出提示
                toastr.success(result.data.message)
                //重置
                addForm.reset()
                //关闭模态框
                $('#addModal').modal('hide')
                //渲染
                getStudentList();

            }

        })
})

// 修改按钮 点击事件
tbody.addEventListener('click', function (e) {
    const dom = e.target
    if (dom.classList.contains('update-show-modal')) {


        $('#updateModal').modal('show')

        // 让待编辑的数据  显示在 模态框中
        //  获取被编辑数据的id 发送给后端 后端响应数据
        //  获取到数据 显示在 编辑表单中

        const id = dom.dataset.id

        axios.get('/student/one', {
            params: {
                id
            }
        })
            .then(result => {
                const obj = result.data.data

                for (const key in obj) {
                    const target = document.querySelector(`#updateModal [name=${key}]`);
                    if (key === 'sex') {
                        // if (obj.sex === '男') {
                        //     document.querySelector(`#updateModal [name=sex][value=男]`).checked = true
                        // }
                        // else if (obj.sex === '女') {
                        //     document.querySelector(`#updateModal [name=sex][value=女]`).checked = true
                        // }
                        document.querySelector(
                            `#updateModal [name=sex][value=${obj.sex}]`
                        ).checked = true;

                        //跳过下列代码
                        continue
                    }
                    if (target) {
                        console.log(obj);
                        target.value = obj[key]
                    }


                    //下拉框的数据更新
                    //根据省信息 来获取市 显示处理 异步
                    renderSelect('/geo/city', { pname: obj.province }, document.querySelector('#updateModal [name=city]'), '市', obj.city)


                    //根据省和市信息 来获取县 
                    renderSelect('/geo/county',
                        {
                            pname: obj.province,
                            cname: obj.city
                        },
                        document.querySelector('#updateModal [name=county]'),
                        '县',
                        obj.county)



                }



            })

    }
    else if (dom.classList.contains('delete-btn')) {
        if (confirm('你确定要删除吗')) {
            const id = dom.dataset.id
            axios.delete('/student/delete', {
                params: {
                    id
                }
            })
                .then(result => {
                    if (result.data.code === 0) {

                        toastr.success(result.data.message)
                        getStudentList()


                    }
                })
        }

    }

})


//更新数据

updateForm.addEventListener('submit', function (e) {
    e.preventDefault()
    const data = $(updateForm).serialize()

    axios.put('/student/update', data)
        .then(result => {
            if (result.data.code === 0) {
                //提示框
                toastr.success(result.data.message)
                //重置
                updateForm.reset()
                //跳出模态框
                $('#updateModal').modal('hide')
                //渲染数据
                getStudentList()

            }
        })
})


